<include file="Public:header" />
<div class="container main"> <include file="Public:left" />
  <div class="w790">
    <h1>为商品添加规格和库存 </h1>
    <div class="table_"> 
      <!--<table class="table table-bordered" width="100%" border="0" cellspacing="0" cellpadding="0"><thead>
          
          <tr>
            <td align="center" bgcolor="#CCCCCC">属性名称</td> 
            <td align="center" bgcolor="#CCCCCC">属性值</td>
          </tr>
        </thead>
      <volist name="attrList" id="vo">
      <tr class="attrList">
            <td align="center">{$vo.title}</td>
            <td align="left">
              <volist name="vo['valList']" id="valvo" key="key1">
                <span style="border:1px solid #000; display:inline-block; padding:4px; margin:0px 2px;">{$valvo.val}<input type="checkbox" name="val[]" class="attrValList" view="{$vo.title}：{$valvo.val}" value="{$vo.id}_{$valvo.id}" /></span>
              </volist>
            </td>
          </tr>
          </volist>
        
      </table>-->
      
      <style>
	  	.Father_Item li{display:inline; padding:2px 4px;}
		#createTable td{text-align:center;}
	  </style>
      <form class="checkoutform" action="{:U('insertSKU')}" method="post">
      <input name="product_id" type="hidden" value="{$id}" />
        <div id="navtab1" style="width: 100%; border: 1px solid #A3C0E8;">
          <div title="扩展信息" tabid="tabItem3">
            <div id="Div1"> 
              <div position="center">
                <div style="padding: 5px 8px;" class="div_content">
                  <div class="div_title"> <span class="infor_title">&nbsp;</span>产品规格
                    <div>
                      <hr />
                    </div>
                  </div>
                  <div class="div_contentlist">
                    <volist name="attrList" id="vo">
                      <ul class="">
                        <li>{$vo.title}：</li>
                      </ul>
                      <ul class="Father_Item" style="padding-left: 20px; background-color: #F8F8F8;">
                        <volist name="vo['valList']" id="valvo" key="key1">
                          <li class="li_width1">
                            <label>
                              <input <if condition="in_array($valvo['id'],$curattr)">checked="checked"</if>type="checkbox" name="attrList[]" class="chcBox_Width" value="{$vo.id}_{$valvo.id}_{$valvo.val}" />
                              {$valvo.val}<span class="li_empty">&nbsp;</span></label>
                          </li>
                        </volist>
                      </ul>
                    </volist>
                  </div>
                  <div class="div_contentlist2">
                    <ul>
                      <li>
                        <div id="createTable"> </div>
                      </li>
                    </ul>
                    <ul>
                      <li>
                        <button type="submit">提交</button>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
  <div class="clear"></div>
</div>
<include file="Public:footer" /> 
<script>var step = {
                //SKU信息组合
                Creat_Table: function () {
                    step.hebingFunction();
                    var SKUObj = $(".Father_Title");
                    //var skuCount = SKUObj.length;//
                    var arrayTile = new Array();　//标题组数
                    var arrayInfor = new Array();　//盛放每组选中的CheckBox值的对象 
                    var arrayColumn = new Array();//指定列，用来合并哪些列
                    var bCheck = true;//是否全选
                    var columnIndex = 0;
                    $.each(SKUObj, function (i, item) {
                        arrayColumn.push(columnIndex);
                        columnIndex++;

                        arrayTile.push(SKUObj.find("li").eq(i).html().replace("：", ""));
                        var itemName = "Father_Item" + i;
                        //选中的CHeckBox取值
                        var order = new Array();
                        $("." + itemName + " input[type=checkbox]:checked").each(function () {
                            order.push($(this).val());
                        });
                        arrayInfor.push(order);

                        if (order.join() == "") {
                            bCheck = false;
                        }
                        //var skuValue = SKUObj.find("li").eq(index).html();
                    });

                    //开始创建Table表            
                    if (bCheck == true) {
                        var RowsCount = 0;
                        $("#createTable").html("");
                        var table = $("<table class=\"table table-bordered\" id=\"process\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" style=\"width:100%;\"></table>");
                        table.appendTo($("#createTable"));
                        var thead = $("<thead></thead>");
                        thead.appendTo(table);
                        var trHead = $("<tr></tr>");
                        trHead.appendTo(thead);
                        //创建表头
                        $.each(arrayTile, function (index, item) {
                            var td = $("<td>" + item + "</td>");
                            td.appendTo(trHead);
                        });
                        var itemColumHead = $("<td>价格</td><td>成本</td><td>库存</td>");
                        itemColumHead.appendTo(trHead);
                        var itemColumHead2 = $("<td >商家编码</td><td >商品条形码</td>");
                        itemColumHead2.appendTo(trHead);

                        var tbody = $("<tbody></tbody>");
                        tbody.appendTo(table);

                        ////生成组合
						//alert(arrayInfor);
                        var zuheDate = step.doExchange(arrayInfor);
						//alert(zuheDate);
                        if (zuheDate.length > 0) {
                            //创建行
                            $.each(zuheDate, function (index, item) {
                                var td_array = item.split(",");
                                var tr = $("<tr></tr>");
                                tr.appendTo(tbody);
								var myarr=new Array();
                                $.each(td_array, function (i, values) {
									
									myarr.push(values.split('_')[1]);
                                    var td = $("<td>" + values.split('_')[2] + "</td>");
                                    td.appendTo(tr);
									
                                });
								
                                var td1 = $("<td ><input type=\"hidden\" name=\"attrVal[]\" value=\""+myarr.join(';')+"\" ><input name=\"price[]\" class=\"l-text\" type=\"text\" value=\"\"></td>");
                                td1.appendTo(tr);
								
								var td20 = $("<td ><input name=\"cost[]\" class=\"l-text\" type=\"text\" value=\"\"></td>");
								
								
                                td20.appendTo(tr);
                                
                                var td3 = $("<td ><input name=\"stock[]\" class=\"l-text\" type=\"text\" value=\"100\"></td>");
                                td3.appendTo(tr);
                                var td4 = $("<td ><input name=\"num[]\" class=\"l-text\" type=\"text\" value=\"\"></td>");
                                td4.appendTo(tr);
								var td5 = $("<td ><input name=\"code[]\" class=\"l-text\" type=\"text\" value=\"\"></td>");
                                td5.appendTo(tr);
                            });
                        }
                        //结束创建Table表
                        arrayColumn.pop();//删除数组中最后一项
                        //合并单元格
                        $(table).mergeCell({
                            // 目前只有cols这么一个配置项, 用数组表示列的索引,从0开始
                            cols: arrayColumn
                        });
                    }
                },//合并行
                hebingFunction: function () {
                    $.fn.mergeCell = function (options) {
                        return this.each(function () {
                            var cols = options.cols;
                            for (var i = cols.length - 1; cols[i] != undefined; i--) {
                                // fixbug console调试 
                                // console.debug(cols[i]); 
                                mergeCell($(this), cols[i]);
                            }
                            dispose($(this));
                        });
                    };
                    // 如果对javascript的closure和scope概念比较清楚, 这是个插件内部使用的private方法            
                    function mergeCell($table, colIndex) {
                        $table.data('col-content', ''); // 存放单元格内容 
                        $table.data('col-rowspan', 1); // 存放计算的rowspan值 默认为1 
                        $table.data('col-td', $()); // 存放发现的第一个与前一行比较结果不同td(jQuery封装过的), 默认一个"空"的jquery对象 
                        $table.data('trNum', $('tbody tr', $table).length); // 要处理表格的总行数, 用于最后一行做特殊处理时进行判断之用 
                        // 我们对每一行数据进行"扫面"处理 关键是定位col-td, 和其对应的rowspan 
                        $('tbody tr', $table).each(function (index) {
                            // td:eq中的colIndex即列索引 
                            var $td = $('td:eq(' + colIndex + ')', this);
                            // 取出单元格的当前内容 
                            var currentContent = $td.html();
                            // 第一次时走此分支 
                            if ($table.data('col-content') == '') {
                                $table.data('col-content', currentContent);
                                $table.data('col-td', $td);
                            } else {
                                // 上一行与当前行内容相同 
                                if ($table.data('col-content') == currentContent) {
                                    // 上一行与当前行内容相同则col-rowspan累加, 保存新值 
                                    var rowspan = $table.data('col-rowspan') + 1;
                                    $table.data('col-rowspan', rowspan);
                                    // 值得注意的是 如果用了$td.remove()就会对其他列的处理造成影响 
                                    $td.hide();
                                    // 最后一行的情况比较特殊一点 
                                    // 比如最后2行 td中的内容是一样的, 那么到最后一行就应该把此时的col-td里保存的td设置rowspan 
                                    if (++index == $table.data('trNum'))
                                        $table.data('col-td').attr('rowspan', $table.data('col-rowspan'));
                                } else { // 上一行与当前行内容不同 
                                    // col-rowspan默认为1, 如果统计出的col-rowspan没有变化, 不处理 
                                    if ($table.data('col-rowspan') != 1) {
                                        $table.data('col-td').attr('rowspan', $table.data('col-rowspan'));
                                    }
                                    // 保存第一次出现不同内容的td, 和其内容, 重置col-rowspan 
                                    $table.data('col-td', $td);
                                    $table.data('col-content', $td.html());
                                    $table.data('col-rowspan', 1);
                                }
                            }
                        });
                    }
                    // 同样是个private函数 清理内存之用 
                    function dispose($table) {
                        $table.removeData();
                    }
                },
                //组合数组
                doExchange: function (doubleArrays) {
                    var len = doubleArrays.length;
					if(len==0){return doubleArrays;}
                    if (len >= 2) {
                        var arr1 = doubleArrays[0];
                        var arr2 = doubleArrays[1];
                        var len1 = doubleArrays[0].length;
                        var len2 = doubleArrays[1].length;
                        var newlen = len1 * len2;
                        var temp = new Array(newlen);
                        var index = 0;
                        for (var i = 0; i < len1; i++) {
                            for (var j = 0; j < len2; j++) {
                                temp[index] = arr1[i] + "," + arr2[j];
                                index++;
                            }
                        }
                        var newArray = new Array(len - 1);
                        newArray[0] = temp;
                        if (len > 2) {
                            var _count = 1;
                            for (var i = 2; i < len; i++) {
                                newArray[_count] = doubleArrays[i];
                                _count++;
                            }
                        }
                        //console.log(newArray);
                        return step.doExchange(newArray);
                    }
                    else {
                        return doubleArrays[0];
                    }
                }
            }
        $(function () {
			//页面加载完创建表格（实现编辑功能）
			createtables();
            //SKU信息
            $(".div_contentlist label").bind("change", function () {
				createtables();
            });
            
            //return step;
        })

//创建表格
function createtables(){
	$('.ced_').each(function(index, element) {
		$(this).removeClass('Father_Item'+index);
		$(this).prev().removeClass('Father_Title');
	});
	$('.Father_Item').each(function(index, element) {
		if($(this).find("input[type='checkbox']:checked").length>0){
			$(this).addClass('ced_');
		}else{
			$(this).removeClass('ced_');
		}
	});
	$('.ced_').each(function(index, element) {
		$(this).addClass('Father_Item'+index);
		$(this).prev().addClass('Father_Title');
	});
	step.Creat_Table();
	edittables();
}
//把原有的SKU记录显示出来，避免编辑时丢失
function edittables(){
	$('#edittables tr').each(function(index, element) {
		//价格赋值
        $("#createTable tr input[value='"+$(this).find("input[name='attrVal[]']").eq(0).val()+"']").next('input').val($(this).find("input[name='price[]']").eq(0).val());
		
		
		
		
		$("#createTable tr input[value='"+$(this).find("input[name='attrVal[]']").eq(0).val()+"']").parent().parent().find("input[name='cost[]']").val($(this).find("input[name='cost[]']").eq(0).val());
		
		
		$("#createTable tr input[value='"+$(this).find("input[name='attrVal[]']").eq(0).val()+"']").parent().parent().find("input[name='stock[]']").val($(this).find("input[name='stock[]']").eq(0).val());
		
		
		$("#createTable tr input[value='"+$(this).find("input[name='attrVal[]']").eq(0).val()+"']").parent().parent().find("input[name='num[]']").val($(this).find("input[name='num[]']").eq(0).val());
		
		$("#createTable tr input[value='"+$(this).find("input[name='attrVal[]']").eq(0).val()+"']").parent().parent().find("input[name='code[]']").val($(this).find("input[name='code[]']").eq(0).val());
    });
	    
}
</script>
<table class="table table-bordered" id="edittables" style="display:none;">
<volist name="stock" id="vo">
  <tr>
    <td><input type="hidden" name="attrVal[]" value="{$vo.attrList}">
      <input name="price[]" type="text" value="{$vo.reprice}"></td>
      <td><input name="cost[]" type="text" value="{$vo.cost}"></td>

    <td><input name="stock[]" type="text" value="{$vo.stock}"></td>
    <td><input name="num[]" type="text" value="{$vo.num}"></td>
    <td><input name="code[]" type="text" value="{$vo.code}"></td>
  </tr>
  </volist>
</table>
<!--<script>


$(document).ready(function(e) {
    $('.attrValList').click(function(e) {
        createAttrProduct();
    });
});
    function createAttrProduct(){
		var arr=new Array();
		var len=0;
		var attrarr=new Array();
		$('.attrList').each(function(index, element) {
			if($(this).children('td').children('span').children("input[checked='checked']").length>1){
				len++;
				$(this).children('td').children('span').children("input[checked='checked']").each(function(index, element) {
                    arr.push($(this).val()+'-'+$(this).attr('view'));
                });
			}
        });
		//组合属性
		var attr=C(arr,len);
		//删除相同属性组的元素
		for(var i=0; i < attr.length; i++){
			if(attr[i].length==len){
				attrarr.push(attr[i]);
			}
		}//alert(attrarr.join('和'));
		var html='';
		for(var i=0; i<attrarr.length; i++){
			html+=attrarr[i].toString()+'<br/>'
		    
		}$('#attrcontent').html(html);
		
	}
	function C(arr, num){
    var r=[];
    (function f(t,a,n){
		//去掉同属性组的值
		for(var j=0; j < t.length-1; j++){
				if(t[j].split('_')[0]==t[j+1].split('_')[0]){
					t=[];
				}
		}
		//
        if (n==0){
			return r.push(t);
		}
        for (var i=0,l=a.length; i<=l-n; i++){
            f(t.concat(a[i]), a.slice(i+1), n-1);
        }
    })([],arr,num);
    return r;
}
</script>--> 
